<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网格布局</title>
		<style type="text/css">
			.grid-container{
				display: grid;
				grid-template-areas: 
				'header header header header header header'
				'menu main main main right right'
				'menu footer footer footer footer footer'
				;
				grid-gap: 10px;
				background-color: #2299ff;
				padding:10px;
			}
			.item1{
				grid-area: header;
			}
			.item2{
				grid-area: menu;
			}
			.item3{
				grid-area: main;
			}
			.item4{
				grid-area: right;
			}
			.item5{
				grid-area: footer;
			}
			.grid-container>div{
				background-color: rgba(255, 255, 255, 0.7);
				text-align: center;
				padding: 20px 0px;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div class="grid-container">
			<div class="item1">
				header
			</div>
			<div class="item2">
				菜单
			</div>
			<div class="item3">
				左侧
			</div>
			<div class="item4">
				右侧
			</div>
			<div class="item5">
				页脚
			</div>
		</div>
	</body>
</html>